본문으로 건너뛰기

mustache vs v-text

작성일 : 2024.11.13

1. 기본 문법​

<!-- 머스태시 문법 -->
<span>{{ message }}</span>

<!-- v-text -->
<span v-text="message"></span>

2. 주요 차이점​

2-1) HTML 이스케이프​

  • 두 방식 모두 HTML을 이스케이프 처리합니다
  • XSS 공격 방지를 위해 HTML 태그를 문자 그대로 표시합니다

2-2) 내용 교체 방식​

<!-- 머스태시 문법: 부분 교체 가능 -->
<span>이것은 {{ message }} 입니다</span>
<!-- "이것은 Hello 입니다" -->

<!-- v-text: 항상 전체 내용을 교체 -->
<span v-text="message">이것은 무시됩니다</span>
<!-- "Hello" -->

2-3) 초기 렌더링​

<!-- 머스태시: Vue가 로드되기 전에 잠시 표시될 수 있음 -->
<span>{{ message }}</span>
<!-- 잠깐 "{{ message }}" 가 보일 수 있음 -->

<!-- v-text: 초기에 아무것도 표시되지 않음 -->
<span v-text="message"></span>
<!-- 빈 상태로 시작 -->

2-4) 성능​

  • v-text가 머스태시 문법보다 미세하게 더 빠름
  • 컴파일 과정이 더 단순하기 때문

3. 사용 권장 상황​

머스태시({{}}) 사용이 좋을 때:

  • 텍스트의 일부분만 동적으로 변경하고 싶을 때
  • 더 읽기 쉽고 직관적인 문법이 필요할 때
  • 다른 정적 텍스트와 함께 사용할 때

v-text 사용이 좋을 때:

  • 요소의 전체 텍스트 내용을 교체할 때
  • 초기 렌더링 시 템플릿이 잠시 보이는 것을 방지하고 싶을 때
  • 아주 미세한 성능 최적화가 필요할 때

일반적으로 대부분의 경우 머스태시({{}}) 문법을 사용하는 것이 더 일반적이고 권장됩니다. 더 직관적이고 유연하기 때문입니다.